<template>
<div>
  <h1>评价页面</h1>
  <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="头像" :label-width="formLabelWidth">
    </el-form-item>
    <el-form-item label="姓名" prop="">
      <el-input v-model="ruleForm.name" placeholder="" style="width: 150px"> </el-input>
    </el-form-item>
    <el-form-item label="汽车名称" prop="">
      <el-input v-model="ruleForm.qiche" placeholder="" style="width: 150px"></el-input>
    </el-form-item>
    <el-form-item label="用户评论" prop="">
      <el-input v-model="ruleForm.pinglun" placeholder="" style="width: 150px"></el-input>
    </el-form-item>
    <el-upload
        action="http://1.94.221.254:60110/api-mendian-service/oss/upload"
        list-type="picture-card"
        :auto-upload="false">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
        >
        <span class="el-upload-list__item-actions">
        <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-form-item label="评价信息">                        
      <el-checkbox-group v-model="xinxi" >
        <el-checkbox label="免费常规检测服务{人工费更换火花塞服务}" name="xinxi"></el-checkbox>
        <el-checkbox label="{人工费}机油" name="xinxi"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="星级" prop="">
      <el-input v-model="ruleForm.xingji" placeholder="" style="width: 150px"></el-input>
    </el-form-item>
    <el-form-item label="发布时间" prop="">
      <el-date-picker
          v-model="ruleForm.shijian"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">确认发布评论</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  name: "Pingjia",
  data() {
    return {
      ruleForm: {},
      imageUrl: '',
      xinxi: [],
      fileList: [],

    }
  },
  methods:{
    submitForm(formName) {

      for (let i = 0; i < this.fileList.length; i++) {
          this.ruleForm.img=this.fileList[i]
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.xinxi=this.xinxi.toString()

          this.axios.post(`http://1.94.221.254:9999/api-qcfw-mendian/mendian/tianjiapinglun`,this.ruleForm).then(res=>{
            if (res.data.code!=1){
              this.$message.success("添加成功")
              this.$router.push('/gengduo')
            }else{
              this.$message.error("添加失败")
            }

          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.img=res.data;
    },
    beforeAvatarUpload(file) {
      return true;
    },
  },
  created() {

  }

}
</script>



<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>